<template>
    <vForm style="padding: 10px;width: 100%;background: var(--van-background);">
        <div style="display: flex;justify-content: space-between;align-items: center;padding: 6px 0;"
            v-if="title || $slots.edit">
            <h4>{{ title }}</h4>
            <div style="padding: 0 1em;">
                <slot name="top"></slot>
            </div>
        </div>
        <template v-for="(label, prop) in instance.labels" :key="prop">
            <template v-if="label && (!label.show || label.show({ data, type: 'form', isPhone: true }))">
                <Cell :id="prop.toString()" :title="label.label" :border="instance.border" :is-link="label.link"
                    :title-style="label.label_width ? 'max-width: 3em' : ''">
                    <component :is="formRender.render(toValue(data), label)"></component>
                </Cell>
            </template>
        </template>
        <slot></slot>
    </vForm>
</template>

<script lang="ts" setup generic="T extends Record<string, any>">
import { Form as vForm } from "vant";
import { Cell } from "vant";
import { Form } from "@b/model/base/form";
import { computed, toValue } from "vue";
import { FormRender } from "./render_item"

interface prop {
    instance: Form<T>
    title?: string
}
const data = computed(() => instance.data)
const { instance } = defineProps<prop>()
const formRender = new FormRender<T, keyof T & string>()
const spance = computed(() => instance.spance / 2 + 'px')
</script>

<style scoped>
.van-cell {
    padding-top: v-bind(spance);
    padding-bottom: v-bind(spance);
}

.van-cell :deep(.cell-value-overflow) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>